<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { Table, TableColumn } from '@/components/Table'
import { ElMessageBox, ElMessage } from 'element-plus'
import { BaseButton } from '@/components/Button'

import { useSearch } from '@/hooks/web/useSearch'
import { useTable } from '@/hooks/web/useTable'
import { ref, reactive, unref, computed } from 'vue'
import { getWithdrawList, getAllPartnerApi, getWithdrawOperate } from '@/api/user'
import { useI18n } from '@/hooks/web/useI18n'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()

const { t } = useI18n()

//formSchema
const channel = ref<any>()
const getAllPartner = async () => {
  const { data } = await getAllPartnerApi()
  channel.value = data.map((item) => {
    return {
      label: item.userName,
      value: item.id
    }
  })
}
getAllPartner()

const { searchRegister, searchMethods } = useSearch()
const { getFormData: getSearchFormData } = searchMethods
const schema = computed<FormSchema[]>(() => [
  {
    field: 'dateTime',
    label: '日期选择',
    component: 'DatePicker',
    componentProps: {
      valueFormat: 'YYYY-MM-DD'
    }
  },
  {
    field: 'creator',
    label: '渠道包',
    component: 'Select',
    componentProps: {
      options: channel.value
    }
  },
  {
    field: 'withdrawType',
    label: '钱包类型',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '现金钱包',
          value: '1'
        },
        {
          label: '邀请钱包',
          value: '2'
        }
      ]
    }
  }
])
//Table

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const searchFormData = await getSearchFormData()
    const { data, count } = await getWithdrawList({
      pageNo: unref(currentPage),
      pageSize: unref(pageSize),
      ...searchFormData,
      recordId: userStore.userInfo.recordId,
      userId: userStore.userInfo.id
    })
    return {
      list: data,
      total: count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index'
  },
  {
    field: 'createTime',
    label: '日期'
  },
  {
    field: 'userName',
    label: '用户名称'
  },
  {
    field: 'code',
    label: '用户ID'
  },
  {
    field: 'parentName',
    label: '渠道包'
  },
  {
    field: 'payType',
    label: '提现平台',
    slots: {
      default: ({ row }) => {
        return <span>{row.payType === 3 ? '支付宝' : row.payType === 2 ? '微信' : '余额'}</span>
      }
    }
  },
  {
    field: 'amount',
    label: '提现金额'
  },
  {
    field: 'action',
    label: '操作',
    width: 200,
    fixed: 'right',
    slots: {
      default: ({ row }) => {
        return (
          <div class="flex justify-center items-center">
            <BaseButton class="!ml-0" type="primary" size="small" onClick={() => onClick(row, 1)}>
              {{
                default: () => '同意'
              }}
            </BaseButton>

            <BaseButton type="danger" size="small" onClick={() => onClick(row, 2)}>
              {{
                default: () => '拒绝'
              }}
            </BaseButton>
          </div>
        )
      }
    }
  }
])
const onClick = (row, type) => {
  const data: any = {
    payOrderId: row.id,
    type,
    walletType: row.walletType
  }
  if (type === 1) {
    ElMessageBox.confirm('确定要操作吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then((res) => {
      console.log(res)
      getWithdrawOperate(data).then(({ code }) => {
        if (code == 0) {
          getList()
          ElMessage.success('操作成功')
        }
      })
    })
  } else {
    ElMessageBox.prompt('请输入拒绝原因', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(({ value }) => {
      getWithdrawOperate({
        ...data,
        reason: value
      }).then(({ code }) => {
        if (code == 0) {
          getList()
          ElMessage.success('操作成功')
        }
      })
    })
  }
}
</script>

<template>
  <ContentWrap title="提现审批">
    <Search
      :schema="schema"
      :model="{ withdrawType: '1' }"
      @search="getList"
      @reset="getList"
      @register="searchRegister"
    />
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      headerAlign="center"
      align="center"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>
